<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>基本列表</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<!-- 
    v-for指令:
        1.用于展示列表数据
        2.语法：v-for="(item, index) in xxx" :key="yyy"
        3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
 -->

<body>
  <!-- 准备好一个容器-->
  <div id="root">
    <!-- 遍历数组 -->
    <h2>人员列表（遍历数组）</h2>
    <ul>
      <li v-for="(p,index) of persons" :key="index">{{p.name}}-{{p.age}}</li>
    </ul>

    <!-- 遍历对象 -->
    <h2>汽车信息（遍历对象）</h2>
    <ul>
      <li v-for="(value,k) of car" :key="k">{{k}}-{{value}}</li>
    </ul>

    <!-- 遍历字符串 -->
    <h2>测试遍历字符串（用得少）</h2>
    <ul>
      <li v-for="(char,index) of str" :key="index">{{char}}-{{index}}</li>
    </ul>

    <!-- 遍历指定次数 -->
    <h2>测试遍历指定次数（用得少）</h2>
    <ul>
      <li v-for="(number,index) of 5" :key="index">{{index}}-{{number}}</li>
    </ul>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false; // 阻止Vue在启动时生成生产提示。

  const vm = new Vue({
    el: "#root",
    data: {
      persons: [
        { id: "001", name: "张三", age: 18 },
        { id: "002", name: "李四", age: 19 },
        { id: "003", name: "王五", age: 20 }
      ],
      car: { name: "奥迪A8", price: "70万", color: "黑色" },
      str: "hello"
    }
  });
</script>

</html>